<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 域名管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
			<div class="content-title">功能按钮</div>
            <div class="handle-box">
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    class="handle-del mr10"
                    @click="delAllSelection"
                >批量删除</el-button>
                <el-select v-model="query.part" placeholder="域名类型" class="handle-select mr10">
                    <el-option key="1" label="com" value="12"></el-option>
                    <el-option key="2" label="cn" value="13"></el-option>
                    <el-option key="3" label="net" value="14"></el-option>
                </el-select>
                <el-input v-model="query.name" placeholder="域名查询" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
			<br>
			<div class="handle-box">
			    <el-button
			        type="primary"
			        icon="el-icon-delete"
			        class="handle-del mr10"
			        @click="delAllSelection"
			    >批量删除</el-button>
			    <el-select v-model="query.part" placeholder="域名类型" class="handle-select mr10">
			        <el-option key="1" label="com" value="12"></el-option>
			        <el-option key="2" label="cn" value="13"></el-option>
			        <el-option key="3" label="net" value="14"></el-option>
			    </el-select>
			    <el-input v-model="query.name" placeholder="域名查询" class="handle-input mr10"></el-input>
			    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
			</div>

			<el-row class="b-box">
			  <el-button type="primary">主要按钮</el-button>
  			  <el-button>默认按钮</el-button>
			  <el-button type="success">成功按钮</el-button>
			  <el-button type="info">信息按钮</el-button>
			  <el-button type="warning">警告按钮</el-button>
			  <el-button type="danger">危险按钮</el-button>
			  <el-button type="style1" @click="clickBtn(6)">信息按钮</el-button>
			  <el-button type="style2" @click="drawer = true">打开抽屉</el-button>
			  <el-button type="style3">危险按钮</el-button>
			</el-row>

			<br>
			<br>

			<el-row>
			  <el-button round>圆角按钮</el-button>
			  <el-button type="primary" round>主要按钮</el-button>
			  <el-button type="success" round>成功按钮</el-button>
			  <el-button type="info" round>信息按钮</el-button>
			  <el-button type="warning" round>警告按钮</el-button>
			  <el-button type="danger" round>危险按钮</el-button>
			</el-row>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="用户名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
            <div class="d-window">
                <h3>体面工作</h3>
                <p>听妻说，她的同事花花辞职了，感到有点意外。花花在她们食堂里属于比较年轻的，才三十多岁，还担个组长什么的职务，此前从未听妻说过她要辞职。</p>
                <p>花花我见过，那是在一次妻的同事聚餐饭局上，我也被邀请参加。看上去花花是一个大大咧咧、性情豪爽的人。记得妻刚来单位不久，就常跟我提起她，妻初来乍到，常得到她的帮助和照顾，正因为有她，妻很快适应了新的单位，和同事们逐渐熟悉起来。</p>
                <p>花花突然辞职，我有点担心妻，毕竟以后在单位里少了一个照顾她的人。我问妻是什么原因导致她辞职的，妻也说不出具体是什么原因，大概是花花与新来的食堂负责人不太投缘，常会爆发出来个一言半语，时间长了，两个人相互之间都看不顺眼，同在一起处事便很尴尬，于是花花便有了辞职的打算。</p>
                <p>花花辞职去哪了呢？妻说她去了一家环卫保洁公司，做起了一名扫路清洁工，我有点替她感到可惜。</p>
                <p>花花辞职了，妻和她仍然保持着微信联系，妻向她婉转表示我对她从事扫路工作的惋惜，可是她却表示很开心，她现在的工作很自由，大多数时间一个人在路上扫地，心情放松，不要考虑如何与人打交道，生活做得快也好慢也好无须看别人脸色，现在这个单位还帮她缴社保医保，话语之间充满了幸福。</p>

                <p>妻问过花花，有没有想过找份稍体面一点的工作，她反问妻：“难道现在这份工作不好吗？时间自由，精神自由，还有养老的保障，我已满足了。”</p>

                <p>花花说得没错，世上哪有什么绝对的体面工作，不过是别人眼中的假像罢了，不同的人有不同的快乐标准，能给自己带来快乐且满足生活的需求的工作也许就是最体面的工作。这样想着，扫路又何尝不是一份体面的工作呢，不仅扫去道路上的灰尘，更扫去蒙在我们心灵上的浮尘。</p>
                <p>花花说得没错，世上哪有什么绝对的体面工作，不过是别人眼中的假像罢了，不同的人有不同的快乐标准，能给自己带来快乐且满足生活的需求的工作也许就是最体面的工作。这样想着，扫路又何尝不是一份体面的工作呢，不仅扫去道路上的灰尘，更扫去蒙在我们心灵上的浮尘。</p>
                <p>花花说得没错，世上哪有什么绝对的体面工作，不过是别人眼中的假像罢了，不同的人有不同的快乐标准，能给自己带来快乐且满足生活的需求的工作也许就是最体面的工作。这样想着，扫路又何尝不是一份体面的工作呢，不仅扫去道路上的灰尘，更扫去蒙在我们心灵上的浮尘。</p>
                <p>愿妻的同事花花以后的人生如她清扫过的道路一样，平穏美丽没有曲折。</p>
            </div>
        </el-drawer>
    </div>
</template>


<script>
import { domainlist } from '../../api/index';
export default {
    name: 'domainlist',
    data() {
        return {
            query: {
                name: '',
                pageIndex: 1,
                pageSize: 15
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1,
            drawer: false
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            domainlist(this.query).then(res => {
                console.log(res);
                this.tableData = res.list;
				if(res.pageTotal){
					this.pageTotal = res.pageTotal || res.list.length;
				}
            });
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },
        clickBtn(number){
            console.log(number);
            this.$message({
                dangerouslyUseHTMLString: true,
                message: `<div class="media-body">
<h2 style="text-align:center;" class="media-heading">
贷款提醒
</h2>
<br>
如果您需要申请贷款，请查看生源地贷款申请流程
<br>贷款办理时间：<br>
必须在指定的时间内才能申请助学贷款，一般为每年6月-9月，具体以当地县区资助中心办理时间为准，请随时关注。
</div>`
            });
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                })
                .catch(() => {});
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = '';
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + ' ';
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            this.form = row;
            this.editVisible = true;
        },
        // 保存编辑
        saveEdit() {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.$set(this.tableData, this.idx, this.form);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.d-window{
    padding: 16px;
    line-height: 30px;
    height: 80%;
    overflow-y: scroll;
}
.d-window h3{
    text-align: center;
}
.d-window p{
    text-indent: 2em;
}
.b-box button{
    width: 260px;
    height: 56px;
    font-size: 26px;
    margin: 10px 6px 10px 6px;
}
.b-box .el-button--style1{
    background-color: #61dc10;
    color: #FFF;
    border-color: #fff;
}
.b-box .el-button--style1:hover{
    color: #669;
}


.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.content-title{
	font-weight: 400;
	/* line-height: 50px; */
	margin-bottom: 16px;
	font-size: 22px;
	color: #1f2f3d;
}
</style>
